import React, { Component } from 'react'
import axios from 'axios'
// 生命周期函数
// 只在类组件中存在
// 01: constructor 生命周期
// 作用: 初始化 state, 同时 为事件函数绑定this 实例
// 注意使用时: 首先调用super()
// 执行时间: 初始化执行

// 02: render
// render: 不能少的生命周期
// 执行时间: 初始化加载执行, 数据更新时触发

// 03:componentDidMount
// 执行时间: 挂载完毕, 页面dom 已经更新完毕
// 初始化执行, 数据更新不执行

// 问题? 问什么在componentDidMount进行数据请求?
// 因为js 单线程,  数据请求一般可能会出错, 导致后面的render生命周期不执行, 导致页面无法加载
// 也不在render, 因为数据请求一般伴随着state 的数据修改操作, 这样容易死循环

export default class Father extends Component {
    constructor() {
        super()
        console.log('constructor');
        // console.log(a);
    }
    state = {
        count: 100,
        contentArr: [] // 要渲染的数据
    }
    render() {
        console.log('render');
        return (
            <div>
                <p>父组件</p>
                <p onClick={() => {
                    this.setState({
                        count: this.state.count + 1
                    })
                }}>count:{this.state.count}</p>

                <ul>
                    {
                        this.state.contentArr.map((item) => <li key={item.id}>{item.content}</li>)
                    }
                </ul>
            </div>
        )
    }
    componentDidMount() {
        console.log('componentDidMount');
        // 进行数据的请求
        axios.get('http://kumanxuan1.f3322.net:8001/index/index').then(res => {
            console.log(res);
            this.setState({
                contentArr: res.data.data.banner
            })
        })
    }
}
